<template>
	<view class="collect-container">
		<view class="section-title">我的收藏职位</view>
		<view class="collect-list">
			<view class="collect-card" v-for="(item, idx) in collectList" :key="idx">
				<view class="card-left">
					<image v-if="item.companyPic" class="company-logo" :src="item.companyPic" mode="aspectFill"></image>
					<image v-else class="company-logo" src="/static/default-company.png" mode="aspectFill"></image>
					<text class="collect-time">{{formatDate(item.createTime)}}</text>
				</view>
				<view class="card-content" @click="toDetail(item)">
					<view class="job-title">{{item.vacancyName}}</view>
					<view class="company-info">
						<text class="job-company">{{item.companyName}}</text>
						<text class="company-industry">{{item.companyIndustry}}</text>
					</view>
					<view class="job-meta">
						<text class="job-salary">{{item.salary}}</text>
					</view>
				</view>
				<view class="card-actions">
					<button class="cancel-btn" @click.stop="cancelCollect(item)">取消收藏</button>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore" @click="loadMore">
			<text v-if="!loading">加载更多</text>
			<text v-else>加载中...</text>
		</view>
		<view class="no-more" v-else>已经到底了~</view>
	</view>
</template>

<script>
	import {
		collectList,
		deleteCollect
	} from '../../utils/api/modules/vacancy';

	export default {
		data() {
			return {
				collectList: [],
				pageNum: 1,
				pageSize: 10,
				hasMore: true,
				loading: false
			}
		},
		onShow() {
			this.pageNum = 1;
			this.collectList = [];
			this.hasMore = true;
			this.loadData();
		},
		methods: {
			async loadData() {
				if (this.loading || !this.hasMore) return;
				this.loading = true;

				try {
					const user = uni.getStorageSync('user');
					if (!user || !user.id) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						return;
					}

					const res = await collectList({
						userId: user.id,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					});

					if (this.pageNum === 1) {
						this.collectList = res.data.records;
					} else {
						this.collectList = [...this.collectList, ...res.data.records];
					}

					this.hasMore = res.data.records.length === this.pageSize;
					this.pageNum++;
				} finally {
					this.loading = false;
				}
			},
			loadMore() {
				if (!this.hasMore || this.loading) return;
				this.loadData();
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/vacancy/vacancy-detail?id=${item.jobId}`
				})
			},
			async cancelCollect(item) {
				uni.showModal({
					title: '提示',
					content: '确定要取消收藏该职位吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await deleteCollect(item.id).then((res) => {
									if (res) {
										uni.showToast({
											title: '取消收藏成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: '取消收藏失败',
											icon: 'none'
										});
									}
								});

								// 从列表中移除
								this.collectList = this.collectList.filter(i => i.id !== item.id);
							} catch (error) {
								console.error('取消收藏失败：', error);
								uni.showToast({
									title: '取消收藏失败',
									icon: 'none'
								});
							}
						}

					}
				});
			},
			formatDate(date) {
				if (!date) return '';
				const d = new Date(date);
				return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
			}
		}
	}
</script>

<style lang="scss">
	.collect-container {
		background-color: #f7f8fa;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.section-title {
		padding: 30rpx 32rpx 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.collect-list {
		padding: 20rpx 24rpx;
	}

	.collect-card {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 24rpx;
		padding: 28rpx;
		position: relative;
		transition: all 0.2s;
		height: 120px;

		&:active {
			transform: scale(0.99);
			opacity: 0.9;
		}
	}

	.card-left {
		margin-right: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.company-logo {
		width: 150rpx;
		height: 100rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.card-content {
		flex: 1;
		min-width: 0;
	}

	.job-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.company-info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 16rpx;

		text {
			margin-right: 16rpx;
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.company-condition {
		background-color: #f0f7ff;
		color: #1890ff;
		padding: 2rpx 12rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
	}

	.job-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.job-salary {
		font-size: 28rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.collect-time {
		font-size: 24rpx;
		color: #999;
	}

	.card-actions {
		position: absolute;
		right: 28rpx;
		bottom: 28rpx;
	}

	.cancel-btn {
		font-size: 24rpx;
		color: #666;
		background: none;
		border: 1rpx solid #ddd;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		transition: all 0.2s;

		&:active {
			background-color: #f5f5f5;
		}
	}

	.load-more,
	.no-more {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 26rpx;
	}

	.load-more {
		color: #54bcbd;

		&:active {
			opacity: 0.7;
		}
	}
</style>